<template>
  <div class="per-center-container">
    <!-- 用户信息概览 -->
    <el-card class="profile-card">
      <div class="profile-header">
        <el-avatar :size="80" :src="userInfo.avatar"></el-avatar>
        <div class="profile-info">
          <h2>{{ userInfo.nickname }}</h2>
          <div class="profile-meta">
            <el-tag v-if="userInfo.isDoctor" type="success">
              <i class="el-icon-s-check"></i> 认证宠物医生
            </el-tag>
            <span class="register-time">注册于 {{ userInfo.registerTime }}</span>
          </div>
          <div class="profile-stats">
            <stat-item icon="el-icon-document" title="帖子" :value="userStats.posts"/>
            <stat-item icon="el-icon-star" title="获赞" :value="userStats.likes"/>
            <stat-item icon="el-icon-chat-line-round" title="评论" :value="userStats.comments"/>
          </div>
        </div>
      </div>
    </el-card>
<post-detail></post-detail>
    <!-- 主内容区域 -->
    <el-row :gutter="20" class="main-content">
      <!-- 导航菜单 -->
      <el-col :span="5">
        <el-menu
            router
            :default-active="$route.path"
            class="side-menu"
            @select="handleMenuSelect">
          <el-menu-item index="/user/posts">
            <i class="el-icon-document"></i>
            <span>我的帖子</span>
          </el-menu-item>
          <el-menu-item index="/user/comments">
            <i class="el-icon-chat-dot-round"></i>
            <span>评论管理</span>
          </el-menu-item>
          <el-menu-item index="/user/account">
            <i class="el-icon-user"></i>
            <span>账号设置</span>
          </el-menu-item>
          <el-menu-item index="/user/certification">
            <i class="el-icon-medal"></i>
            <span>身份认证</span>
          </el-menu-item>
        </el-menu>
      </el-col>

      <!-- 内容展示区 -->
      <el-col :span="19">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import StatItem from '@/components/StatItem.vue'
import PostDetail from "@/views/Personal-Center/PostDetail.vue";

export default {
  components: {PostDetail, StatItem },
  data() {
    return {
      userInfo: {
        nickname: '宠物达人',
        avatar: require('@/assets/images/img.png'),
        isDoctor: false,
        registerTime: '2022-03-15'
      },
      userStats: {
        posts: 24,
        likes: 356,
        comments: 128
      }
    }
  },
  methods: {
    handleMenuSelect(index) {
      console.log('导航至:', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.per-center-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-card {
  margin-bottom: 20px;

  .profile-header {
    display: flex;
    align-items: center;
    padding: 20px;

    .profile-info {
      margin-left: 30px;
      flex-grow: 1;

      h2 {
        margin: 0 0 10px 0;
        font-size: 24px;
      }

      .profile-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;

        .register-time {
          color: #909399;
          font-size: 0.9em;
        }
      }

      .profile-stats {
        display: flex;
        gap: 30px;
      }
    }
  }
}

.main-content {
  margin-top: 20px;

  .side-menu {
    border-right: none;
    padding-right: 10px;

    .el-menu-item {
      height: 50px;
      line-height: 50px;
      margin: 5px 0;
      border-radius: 4px;

      &:hover {
        background-color: #f5f7fa;
      }

      &.is-active {
        background-color: #ecf5ff;
        color: #409EFF;
      }
    }
  }
}
</style>